<template>
  <el-table
    ref="multipleTable"
    :data="arr"
    tooltip-effect="dark"
    style="width: 100%; margin-top:20px;"
    :stripe="true"
    :border="true"
    :header-cell-style="headerRowClassName"
    :cell-style="cellStyle"
  >
    <el-table-column prop="id" label="序号" width="50" height="40"></el-table-column>
    <el-table-column label="订单状态">
      <template slot-scope="scope">{{ stateObj[scope.row.state] }}</template>
    </el-table-column>
    <el-table-column label="订单类型">
      <template slot-scope="scope">{{typeObj[scope.row.type] }}</template>
    </el-table-column>
    <el-table-column prop="number" label="订单编号"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="keshi" label="科室"></el-table-column>
    <el-table-column prop="doctor" label="接诊医生"></el-table-column>
    <el-table-column prop="you" label="优惠(元)"></el-table-column>
    <el-table-column prop="ying" label="应收/退(元)"></el-table-column>
    <el-table-column prop="shi" label="实收/退(元)"></el-table-column>
    <el-table-column prop="yi" label="医保(元)"></el-table-column>
    <el-table-column prop="hui" label="会员卡(元)"></el-table-column>
    <el-table-column prop="xian" label="现金(元)"></el-table-column>
    <el-table-column prop="zhi" label="支付宝(元)"></el-table-column>
    <el-table-column prop="wei" label="微信(元)"></el-table-column>
    <el-table-column prop="yin" label="银行卡(元)"></el-table-column>
    <el-table-column prop="date" label="收费日期"></el-table-column>
    <el-table-column prop="person" label="收费员"></el-table-column>

    <el-table-column label="操作" width="80" fixed="right">
      <template slot-scope="scope">
        <!-- <el-button size="mini" @click="handleEdit(scope.row)">查看详情</el-button> -->
        <span @click="openDialog(scope.row)" style="color:#989cee;cursor:pointer">查看详情</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: ["arr"],
  data() {
    return {
      // tableData: [
      //   {
      //     state: 0,
      //     type: 1,
      //     number: 1,
      //     name: "厉凯翔",
      //     keshi: "全科",
      //     doctor: "图图",
      //     you: 210,
      //     ying: 10,
      //     shi: 200,
      //     yi: 50,
      //     hui: 150,
      //     xian: 0,
      //     zhi: 0,
      //     wei: 0,
      //     yin: 0,
      //     date: 2022 - 1 - 1,
      //     person: " 申屠雅婷"
      //   }
      // ],
      stateObj: {
        0: "已收费",
        1: "未收费"
      },
      typeObj: {
        0: "处方开立",
        1: "不处方开立"
      }
    };
  },

  methods: {
    openDialog(row) {
      this.$emit("parentDialog", row);
      console.log(row);
    },
    headerRowClassName({ row, column, rowIndex }) {
      return {
        background: "#eaebff",
        minWidth: "60px",
        maxWidth: "90px",
        width: "60px"
      };
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      let obj = {
        color: ""
      };
      switch (columnIndex) {
        case 1:
          obj.color = "#79ddb4";
          break;
        case 2:
          obj.color = "#989cee";
          break;
      }
      return obj;
    }
  }
};
</script>

<style lang="less" scoped>
</style>